<script setup lang="ts">
import useSelMon, { useSelMonRefs } from "./useSelMon";
import All from "../All/index.vue";
import SelMon from "./SelMon.vue";
import useFetchStats from "../../hooks/useFetchStats";
defineProps({
  resData: {
    type: Object,
    default: () => {}
  }
});
const { toggleMonth } = useSelMon();
const { curMon, monRef } = useSelMonRefs();
const { updateParams } = useFetchStats();
function updateMon(key: "start_month", it: string | number, idx: number) {
  updateParams({
    [key]: it
  });
}
</script>
<template>
  <All :resData="resData">
    <template #default>
      <div class="mb-20">
        <div class="flex justify-start items-center gap-x-0 ml-20">
          <div
            class="mr-10 font-400 text-16 color-[#444] lh-19 text-center not-italic"
          >
            เดือน
          </div>
          <div
            class="w-270 h-28 bg-[#fff] rounded-4 b-2 b-solid b-#004D8E flex justify-between items-center px-20 relative z-99"
            @click="toggleMonth"
          >
            <div
              class="font-400 text-14 color-[#004D8E] lh-16 text-center not-italic"
            >
              <SelMon
                :curMon="curMon"
                @update:cur-mon="(it: string | number, idx: number) => updateMon('start_month', it,idx)"
                ref="monRef"
              />
            </div>
            <div class="center">
              <SvgIcon name="Polygon_5" class="w-11 aspect-ratio-[11/6]" />
            </div>
          </div>
        </div>
      </div>
    </template>
  </All>
</template>
